<template>
  <div class="container_left" ref="leftBox" :class="!leftShow ? 'shouqi' : ''">
    <!-- 左测区域导航栏 -->
    <div class="navbar">
      <span v-show="leftShow">模块选择</span>
      <div @click="showOrHide">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="tooltipTitle"
          placement="bottom"
        >
          <SvgIcon
            name="shouqi"
            width="25px"
            hight="25px"
            class="return"
          ></SvgIcon>
        </el-tooltip>
      </div>
    </div>
    <!-- 左侧区域 -->
    <div class="left_box">
      <!-- 进度条 -->
      <el-scrollbar height="85vh">
        <div class="box">
          <!-- 拖拽 -->
          <draggable
            v-model="userResumeStore.resumeJsonNewStore.COMPONENTS"
            group="people"
            @start="drag = true"
            @end="drag = false"
            item-key="id"
          >
            <template #item="{ element, index }">
              <div class="scrollbar-demo-item1">
                <div class="left">
                  <div class="icon">
                    <SvgIcon
                      :name="element.data.iconfont"
                      width="16px"
                      hight="16px"
                    ></SvgIcon>
                  </div>
                  <div class="word" v-show="leftShow">
                    <span>{{ element.data.title }}</span>
                  </div>
                </div>
                <div class="btn" v-show="leftShow" ref="icoms">
                  <el-switch
                    v-model="
                      userResumeStore.resumeJsonNewStore.COMPONENTS[index].data
                        .show
                    "
                    class="ml-2"
                    style="
                      --el-switch-on-color: #13ce66;
                      --el-switch-off-color: #ff4949;
                    "
                  />
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import draggable from 'vuedraggable'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useResumeJsonStore } from '@/store/resume'
let userResumeStore = useResumeJsonStore()
const value2 = ref(true)
const drag = ref(false)
//按钮展开或收起
const tooltipTitle = ref<string>('收起')
//展示时为true
const leftShow = ref<Boolean>(true)
const leftBox = ref<any>(null)
//收起展开处理函数
function showOrHide() {
  leftShow.value = !leftShow.value
  if (!leftShow.value) {
    tooltipTitle.value = '展开'
    leftBox.value.style.width = '55px'
  } else {
    leftBox.value.style.width = '300px'
    tooltipTitle.value = '收起'
  }
}
// 点击元素事件
// const selectModel = (element: any) => {
//   console.log(element)
// }

// onMounted(()=>{
// })
</script>
<style lang="scss" scoped>
@mixin size($w, $h) {
  width: $w;
  height: $h;
}
@keyframes move {
  /*from表示动画的开始位置 也可以使用0%*/
  from {
    width: 300px;
  }

  /*to动画的结束位置 也可以使用100%*/
  to {
    width: 60px;
  }
}
.container_left {
  // position: absolute;
  // top: 50px;
  // left: 0;
  width: 300px;
  // background-color: pink;
  height: 100vh;
  padding-top: 50px;

  transition: all 0.5s;
  .navbar {
    @include size(100%, 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background-color: #ffffff;
    span {
      font-weight: 700;
    }
  }
  .shouqi {
    background-color: pink;
  }

  .left_box {
    .scrollbar-demo-item:hover {
      border: 1px dashed #00c091;
    }
    .scrollbar-demo-item1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 65px;
      margin: 1px;
      border-radius: 4px;
      border: 0.6px solid #efefef;
      background: #ffffff;
      color: var(--el-color-primary);
      box-shadow: #c4c4c4;
      .left {
        display: flex;
        align-content: center;
        padding: 0 5px;
        .icon {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #c4c4c4;
          border-radius: 50%;
        }
        .word {
          padding: 5px 0 0 20px;
          font-size: 12px;
          color: #666666;
        }
      }
      .btn {
        padding-right: 20px;
      }
    }
  }
}
</style>
